<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 首页管理</el-breadcrumb-item>
                <el-breadcrumb-item>关于我们</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
          <el-table :data="tableData" border style="width: 100%" ref="multipleTable">
              <el-table-column prop="title" label="标题"></el-table-column>
              <!-- <el-table-column prop="img" label="图片" width="150"></el-table-column> -->
              <el-table-column  label="轮播图" style="width:300px">
                  <template slot-scope="scope">
                      <div style="width:300px;height:100px;" >
                          <img :src="scope.row.img" style="width:300px;height:100px;"/>
                      </div>
                  </template>
              </el-table-column>
              <el-table-column prop="content" label="介绍"></el-table-column>
              <el-table-column label="操作" width="180" align="center">
                  <template slot-scope="scope">
                      <el-button size="small" type="text"  @click="editVisible = true">更新</el-button>
                  </template>
              </el-table-column>
          </el-table>
        </div>
        <!-- 更新谭树矿 -->
        <el-dialog title="更新品牌介绍" :visible.sync="editVisible" width="800px" :before-close="closeDialog">
            <el-form label-width="80px">
              <el-form-item label="标题">
                <el-input v-model="brand.title" placeholder="请输入品牌介绍标题" style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="品牌图">
                <div class="sola-upload clearfix">
                    <div class="sola-left clearfix" v-show = "brand.img">
                        <div class="sola-flex">
                            <img  :src="brand.img">
                            <span class="delete" @click="delVisible=true"><i class="el-alert__icon el-icon-error"></i></span>
                        </div>
                    </div>
                    <div class="sola-file-box" v-show = "!brand.img">
                        <el-button type="primary" plain>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                        <input class="btn-file" type="file" @change="uploadBanner"/>
                        <span style="color:red;padding-left:10px;">请上传一张品牌图 (比例规范 高：宽)建议上传的轮播图比例是15：23 示例 490X750 </span>
                    </div>
                </div>

              </el-form-item>
              <el-form-item label="品牌介绍">
                <el-input type = "textarea" v-model="brand.content" placeholder="请输入品牌详细介绍"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click.prevent="deleteImg">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  export default {
      data () {
        return {
          accept:'image/gif, image/jpeg, image/png, image/jpg',
          delVisible: false,
          editVisible: false,
          tableData: [], // 列表数据
          brand: {
            title: '', // 标题
            img: '', // 图片
            content: '',// 文字描述
          }
        }
      },
      mounted () {
        this.getBrandData()
      },
      methods: {
        // 触发上传图片
        // 触发上传门店主图
        uploadBanner(event){
            var _event = event;
            var _this = this;
            let reader = new FileReader();
            let img1 = event.target.files[0];
            let type = img1.type;//文件的类型，判断是否是图片
            let size = img1.size;//文件的大小，判断图片的大小
            const files = event.target;
            if(this.accept.indexOf(type) == -1){
                this.$message({
                    message: '请选择gif,jpeg,png,jpg格式图片上传',
                    type: 'warning'
                });
                return false;
            }else if(size>3145728){
                this.$message({
                    message: '请选择3M以内的图片上传',
                    type: 'warning'
                });
                return false;
            }else if (typeof(FileReader) === 'undefined') {
                this.$notify.error({
                    title: '错误',
                    message: '抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！'
                });

            }else {
                //把图片转换成功base64
                _this.getBase64(files,(url)=>{
                    var base = url
                    const querystring = require('querystring')
                    const param = {
                        base64:base
                    }
                    this.$axios.post('/api/common/upload/base64',querystring.stringify(param)).then(response=>{
                        if(response.data.code==200){
                            this.$message({
                                message: '恭喜你，图片上传成功',
                                type: 'success'
                            });
                            this.brand.img = response.data.data;

                        }else{
                            this.$notify.error({
                                title: '上传图片失败',
                                duration:2000,
                                message: '失败原因：'+ response.data.msg
                            })
                        }}).catch(error=>{
                        console.log(error)
                    })
                })
            }
        },

        // file 文件源转换base64 并且按照最低像素压缩
        getBase64(file,callback){
            //图片文件转base64
            var maxWidth = 640;
            if(file.files && file.files[0]){
                var thisFile = file.files[0];
                var reader = new FileReader();
                reader.onload = function(event){
                    var imgUrl = event.target.result;
                    var img = new Image();
                    img.onload = function(){
                        var canvasId = 'canvasBase64Imgid',
                        canvas = document.getElementById(canvasId);
                        if(canvas!=null){document.body.removeChild(canvas);}
                        var canvas = document.createElement("canvas");
                        canvas.innerHTML = 'New Canvas';
                        canvas.setAttribute("id", canvasId);
                        canvas.style.display='none';
                        document.body.appendChild(canvas);
                        canvas.width = this.width;
                        canvas.height = this.height;
                        var imageWidth = this.width,
                        imageHeight = this.height;
                        if (this.width > maxWidth){
                            imageWidth = maxWidth;
                            imageHeight = this.height * maxWidth/this.width;
                            canvas.width = imageWidth;
                            canvas.height = imageHeight;
                        }
                        var context = canvas.getContext('2d');
                        context.clearRect(0, 0, imageWidth, imageHeight);
                        context.drawImage(this, 0, 0, imageWidth, imageHeight);
                        var base64 = canvas.toDataURL('image/png',1);
                        canvas.remove();
                        callback(base64);
                    }
                    img.src = imgUrl;
                }
                reader.readAsDataURL(file.files[0]);

            }
        },
        // 删除图片
        deleteImg () {
          this.brand.img = '',
          this.delVisible = false

        },
        // 关闭弹窗
        closeDialog() {
          this.editVisible = false
        },
        saveEdit() {
          if(this.brand.title ==""){
              this.$message.error('请输入品牌介绍标题');
              return false;
          }
          else if(this.brand.content ==""){
              this.$message.error('请输入品牌介绍');
              return false;
          }
          else if(this.brand.img ==""){
              this.$message.error('请上传一张品牌图');
              return false;
          }
          else{
            const param =
            {
              title: this.brand.title,
              content:this.brand.content,
              img:this.brand.img,
            }
           this.setBrand(param);
          }

        },
        // 获取品牌介绍数据
        getBrandData() {
          this.$axios.get('/manage/index/brand/get',{params: {
            // pageIndex:this.pageIndex,
            // pageSize:this.pageSize
          }}).then((res) => {
            if(res.data.code == 200){
              // 获取数据
              this.tableData.push(res.data.data)
              this.brand.title = res.data.data.title
              this.brand.img = res.data.data.img
              this.brand.content = res.data.data.content
            }else{
                this.$notify.error({
                    title: '获取品牌数据失败',
                    duration:2000,
                    message: '失败原因：'+ res.data.msg
                })
            }
          }).catch(error=>{
              console.log(error);
          })

        },
        setBrand (param){
            var _this = this
            console.log(this.brand)
            const querystring = require('querystring');
            this.$axios.post('/manage/index/brand/set',querystring.stringify(param)).then(response=>{
                if(response.data.code==200){
                    this.$message({
                        message: '品牌介绍更新成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                      _this.tableData = []
                      _this.editVisible = false
                      _this.getBrandData()
                    },1500);

                }
                else{
                  console.log(response.data.code)
                    this.$notify.error({
                        title: '更新失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        },
      }
    }
</script>
<style lang="stylus" scoped>
.sola-upload{
    .sola-left{
        width :100%;
        height :auto;
        .sola-flex{
            float:left
            width: 360px;
            height: 180px;
            margin-bottom 20px;
            margin-right:15px;
            position:relative;
            .delete{
                position:absolute;
                top:2px;
                right:13px;
                color: #f56c6c;
                display:inline-block;
                padding:5px 5px;
                .el-alert__icon{font-size:28px;cursor:pointer}
            }
            img {
                width:100%;
                height:100%;
            }
        }
    }
    .sola-file-box{
        position:relative;
        .btn-file{
            position:absolute;
            top:0;
            left:0;
            z-index 1;
            opacity:0;
            width :120px;
            height :40px;
            outline: 0;
            background-color :none;
            cursor:pointer;
        }
    }
}
</style>
